<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 指南信息
const guideInfo = ref({
  title: '借阅指南',
  steps: [
    {
      title: '查找图书',
      description: '在首页或图书列表页面，您可以通过搜索、分类筛选等方式找到想要借阅的图书。',
      images: [
        '/static/images/help/borrow/search.svg',
        '/static/images/help/borrow/filter.svg',
      ],
      tips: [
        '可以使用关键词搜索图书名称、作者等信息',
        '可以通过分类快速找到相关图书',
        '建议查看图书详情，了解借阅状态和位置信息',
      ],
    },
    {
      title: '申请借阅',
      description: '在图书详情页面，点击"借阅"按钮，确认借阅信息后提交申请。',
      images: [
        '/static/images/help/borrow/detail.svg',
        '/static/images/help/borrow/apply.svg',
      ],
      tips: [
        '请确认图书当前状态为"可借阅"',
        '填写借阅期限，默认30天',
        '可以给图书所有者留言，说明借阅意图',
      ],
    },
    {
      title: '见面交接',
      description: '借阅申请通过后，您需要与图书所有者约定时间地点进行图书交接。',
      images: [
        '/static/images/help/borrow/meet.svg',
      ],
      tips: [
        '建议选择公共场所进行交接',
        '交接时请当面检查图书状态',
        '确认无误后，在平台上确认交接完成',
      ],
    },
  ],
  faqs: [
    {
      question: '借阅期限可以延长吗？',
      answer: '可以。在借阅到期前，您可以联系图书所有者申请延长借阅期限。如果对方同意，您可以在平台上修改借阅期限。',
      isOpen: false,
    },
    {
      question: '如果图书损坏怎么办？',
      answer: '如果图书在借阅期间发生损坏，请及时与图书所有者沟通，协商赔偿事宜。建议在交接时拍照记录图书状态，避免纠纷。',
      isOpen: false,
    },
    {
      question: '可以同时借阅多本书吗？',
      answer: '可以。平台对同时借阅的图书数量没有限制，但建议根据实际阅读需求合理借阅，避免影响其他用户使用。',
      isOpen: false,
    },
  ],
})

// 预览图片
function previewImage(images: string[], current: number) {
  uni.previewImage({
    urls: images,
    current: images[current],
  })
}

// 切换问题展开/收起
function toggleFaq(index: number) {
  guideInfo.value.faqs[index].isOpen = !guideInfo.value.faqs[index].isOpen
}

// 跳转到客服页面
function goToService() {
  uni.navigateTo({
    url: '/pages/service/online/index',
  })
}

// 跳转到反馈页面
function goToFeedback() {
  uni.navigateTo({
    url: '/pages/feedback/index',
  })
}

// 获取指南详情
async function getGuideDetail(id: number) {
  try {
    // TODO: 调用API获取数据
    // const res = await getGuideDetail(id);
    // guideInfo.value = res.data;
  }
  catch (error) {
    uni.showToast({
      title: '加载失败',
      icon: 'none',
    })
  }
}

// 页面加载时获取数据
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const id = currentPage.$page?.options?.id
  if (id) {
    getGuideDetail(Number(id))
  }
})
</script>

<template>
  <view class="container">
    <!-- 指南内容 -->
    <view class="guide-content">
      <!-- 标题 -->
      <view class="title">
        {{ guideInfo.title }}
      </view>

      <!-- 步骤列表 -->
      <view class="step-list">
        <view
          v-for="(step, index) in guideInfo.steps"
          :key="index"
          class="step-item"
        >
          <view class="step-header">
            <view class="step-number">
              {{ index + 1 }}
            </view>
            <text class="step-title">
              {{ step.title }}
            </text>
          </view>

          <view class="step-content">
            <text class="step-desc">
              {{ step.description }}
            </text>

            <!-- 图片展示 -->
            <view v-if="step.images && step.images.length" class="image-list">
              <image
                v-for="(img, imgIndex) in step.images"
                :key="imgIndex"
                :src="img"
                mode="widthFix"
                @click="previewImage(step.images, imgIndex)"
              />
            </view>

            <!-- 注意事项 -->
            <view v-if="step.tips && step.tips.length" class="tips">
              <view class="tips-title">
                注意事项：
              </view>
              <view
                v-for="(tip, tipIndex) in step.tips"
                :key="tipIndex"
                class="tip-item"
              >
                <text class="dot">
                  •
                </text>
                <text>{{ tip }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 常见问题 -->
      <view v-if="guideInfo.faqs && guideInfo.faqs.length" class="faq-section">
        <view class="section-title">
          常见问题
        </view>

        <view class="faq-list">
          <view
            v-for="(faq, index) in guideInfo.faqs"
            :key="index"
            class="faq-item"
            @click="toggleFaq(index)"
          >
            <view class="question">
              <text>{{ faq.question }}</text>
              <text class="iconfont" :class="faq.isOpen ? 'icon-up' : 'icon-down'" />
            </view>

            <view v-if="faq.isOpen" class="answer">
              <text>{{ faq.answer }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <button class="action-btn" @click="goToService">
        联系客服
      </button>
      <button class="action-btn primary" @click="goToFeedback">
        问题反馈
      </button>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.guide-content {
  padding: 30rpx;

  .title {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 40rpx;
  }
}

.step-list {
  .step-item {
    margin-bottom: 40rpx;

    .step-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .step-number {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background: #4caf50;
        color: #fff;
        font-size: 24rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .step-title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .step-content {
      background: #fff;
      border-radius: 12rpx;
      padding: 30rpx;

      .step-desc {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }

      .image-list {
        margin: 20rpx 0;

        image {
          width: 100%;
          border-radius: 8rpx;
          margin-bottom: 20rpx;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .tips {
        margin-top: 20rpx;
        padding-top: 20rpx;
        border-top: 1rpx solid #f5f5f5;

        .tips-title {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 16rpx;
        }

        .tip-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 12rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .dot {
            color: #4caf50;
            margin-right: 10rpx;
          }

          text {
            font-size: 26rpx;
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }
}

.faq-section {
  margin-top: 40rpx;

  .section-title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .faq-list {
    background: #fff;
    border-radius: 12rpx;

    .faq-item {
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .question {
        display: flex;
        justify-content: space-between;
        align-items: center;

        text {
          font-size: 28rpx;
          color: #333;
        }

        .iconfont {
          font-size: 32rpx;
          color: #999;
        }
      }

      .answer {
        margin-top: 20rpx;
        padding-top: 20rpx;
        border-top: 1rpx solid #f5f5f5;

        text {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }
}

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .action-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 40rpx;
    margin: 0 10rpx;

    &.primary {
      background: #4caf50;
      color: #fff;
    }
  }
}
</style>
